<template>
  <view class="user-edit-page">
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="title">编辑个人信息</text>
    </view>

    <!-- 表单容器 -->
    <view class="form-container">
      <!-- 头像上传（单独一行） -->
      <view class="avatar-section" @click="chooseAvatar">
        <view class="avatar-wrap">
          <image :src="userInfo.avatar || defaultAvatar" class="avatar-img" mode="scaleToFill"/>
          <view class="avatar-tip">点击更换头像</view>
        </view>
      </view>

      <!-- 表单项（标签与输入同行） -->
      <view class="form-items">
        <!-- 亲属类型 -->
        <view class="form-item">
          <text class="label">亲属类型</text>
          <radio-group class="radio-control" @change="handleRelationChange">
            <label class="radio-label" v-for="t in relationTypes" :key="t.value">
              <radio :value="t.value" :checked="userInfo.relation === t.value" color="#ff7d00"/>
              <text class="radio-text">{{ t.label }}</text>
            </label>
          </radio-group>
        </view>

        <!-- 姓名 -->
        <view class="form-item">
          <text class="label">姓名</text>
          <input class="input-control" v-model="userInfo.name" placeholder="请输入姓名（必填）" maxlength="20" @blur="validateName"/>
        </view>

        <!-- 手机号 -->
        <view class="form-item">
          <text class="label">手机号</text>
          <input class="input-control" v-model="userInfo.phone" placeholder="请输入手机号（必填）" maxlength="11" type="number" @blur="validatePhone"/>
        </view>

        <!-- 性别 -->
        <view class="form-item">
          <text class="label">性别</text>
          <radio-group class="radio-control" @change="handleGenderChange">
            <label class="radio-label" v-for="g in genders" :key="g.value">
              <radio :value="g.value" :checked="userInfo.gender === g.value" color="#ff7d00"/>
              <text class="radio-text">{{ g.label }}</text>
            </label>
          </radio-group>
        </view>

        <!-- 所属社区 -->
        <view class="form-item">
          <text class="label">所属社区</text>
          <picker class="picker-control" :range="communityList" :value="communityIndex" @change="handleCommunityChange">
            <view class="picker-text">
              {{ communityIndex !== -1 ? communityList[communityIndex] : '请选择社区（必填）' }}
              <wd-icon name="arrow-down" size="20px" color="#999"/>
            </view>
          </picker>
        </view>

        <!-- 详细地址 -->
        <view class="form-item">
          <text class="label">详细地址</text>
          <input class="input-control" v-model="userInfo.address" placeholder="请输入详细地址（选填）" maxlength="100"/>
        </view>
      </view>

      <!-- 保存按钮 -->
      <view class="save-btn" @click="handleSave">
        <text class="btn-text">保存信息</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue';

// 默认头像
const defaultAvatar = 'https://via.placeholder.com/150x150?text=默认头像';
// 用户信息
const userInfo = reactive({
  avatar: '',
  relation: '',
  name: '',
  phone: '',
  gender: '',
  community: '',
  address: ''
});
// 亲属类型选项
const relationTypes = ref([{ value: 'child', label: '子女' }, { value: 'relative', label: '亲属' }]);
// 性别选项
const genders = ref([{ value: 'male', label: '男' }, { value: 'female', label: '女' }]);
// 社区列表
const communityList = ref(['阳光社区', '绿城社区', '幸福里社区', '和谐家园']);
// 社区选择索引
const communityIndex = ref(-1);

// 亲属类型选择
const handleRelationChange = (e) => {
  userInfo.relation = e.detail.value;
};
// 性别选择
const handleGenderChange = (e) => {
  userInfo.gender = e.detail.value;
};
// 社区选择
const handleCommunityChange = (e) => {
  communityIndex.value = e.detail.value;
  userInfo.community = communityList.value[e.detail.value];
};
// 验证姓名
const validateName = () => {
  const v = userInfo.name.trim();
  if (!v) {
    uni.showToast({ title: '请输入姓名', icon: 'none' });
    return false;
  }
  if (v.length > 20) {
    uni.showToast({ title: '姓名不超过20字', icon: 'none' });
    return false;
  }
  return true;
};
// 验证手机号
const validatePhone = () => {
  const v = userInfo.phone.trim();
  const reg = /^1[3-9]\d{9}$/;
  if (!v) {
    uni.showToast({ title: '请输入手机号', icon: 'none' });
    return false;
  }
  if (!reg.test(v)) {
    uni.showToast({ title: '手机号格式不正确', icon: 'none' });
    return false;
  }
  return true;
};
// 保存信息
const handleSave = () => {
  if (!validateName() || !validatePhone()) return;
  
  uni.showLoading({ title: '保存中...' });
  setTimeout(() => {
    uni.hideLoading();
    uni.showToast({ title: '保存成功', icon: 'success' });
  }, 1500);
};
// 选择头像
const chooseAvatar = async () => {
  try {
    const res = await uni.chooseImage({ count: 1, sizeType: ['compressed'] });
    userInfo.avatar = res.tempFilePaths[0];
    uni.showToast({ title: '头像更换成功', icon: 'success' });
  } catch (err) {
    uni.showToast({ title: '头像选择失败', icon: 'none' });
  }
};
</script>

<style lang="less" scoped>
.user-edit-page {
	@import '@/static/styles/colors.less';
	
  padding: 32rpx 24rpx;
  background: #f5f7fa;
  min-height: 100vh;

  .page-header {
    margin-bottom: 40rpx;
    .title {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
    }
  }

  .form-container {
    background: #fff;
    border-radius: 16rpx;
    padding: 32rpx 24rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);

    .avatar-section {
      margin-bottom: 40rpx;
      display: flex;
      justify-content: center;

      .avatar-wrap {
        position: relative;
        width: 180rpx;
        height: 180rpx;
        border-radius: 50%;
        overflow: hidden;
        border: 2rpx solid #eee;

        .avatar-img {
          width: 100%;
          height: 100%;
        }

        .avatar-tip {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 40rpx;
          line-height: 40rpx;
          text-align: center;
          font-size: 24rpx;
          color: #fff;
          background: rgba(0, 0, 0, 0.5);
        }
      }
    }

    .form-items {
      .form-item {
        display: flex; // 关键：标签与输入控件同行
        align-items: center; // 垂直居中对齐
        margin-bottom: 40rpx;
        gap: 20rpx; // 标签与输入控件间距

        .label {
          min-width: 140rpx; // 标签最小宽度（根据实际内容调整）
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
        }

        .input-control {
          flex: 1; // 输入控件占据剩余空间
          height: 80rpx;
          font-size: 28rpx;
          color: #333;
          border: 1rpx solid #eee;
          border-radius: 8rpx;
          padding: 0 16rpx;
          box-sizing: border-box;
          transition: border-color 0.2s;

          &:focus {
            border-color: #ff7d00;
            outline: none;
          }
        }

        .radio-control {
          flex: 1; // 单选框组占据剩余空间
          display: flex;
          flex-direction: column;
          gap: 16rpx;

          .radio-label {
            display: flex;
            align-items: center;
            gap: 12rpx;
            cursor: pointer;

            .radio-text {
              font-size: 28rpx;
              color: #333;
            }
          }
        }

        .picker-control {
          flex: 1; // 选择器占据剩余空间
          height: 80rpx;
          border: 1rpx solid #eee;
          border-radius: 8rpx;
          padding: 0 16rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          transition: border-color 0.2s;

          &:active {
            border-color: #ff7d00;
          }

          .picker-text {
            font-size: 28rpx;
            color: #333;
          }
        }
      }
    }

    .save-btn {
      width: 100%;
      height: 88rpx;
      background: @color-primary;
      border-radius: 44rpx;
      margin-top: 24rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;

      &:active {
        background: #e66a00;
        transform: scale(0.98);
      }

      .btn-text {
        font-size: 32rpx;
        color: #fff;
        font-weight: 500;
      }
    }
  }
}
</style>